<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id?'编辑':'新增'"
             @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="orderNo" prop="orderNo">
             <el-input v-model="form.orderNo" maxlength="255" placeholder="请输入orderNo"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="memberId" prop="memberId">
             <el-input v-model="form.memberId" maxlength="100" placeholder="请输入memberId"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="memberName" prop="memberName">
             <el-input v-model="form.memberName" maxlength="255" placeholder="请输入memberName"/>
           </el-form-item>
         </el-col>
        <el-col :span="12">
          <el-form-item label="0" prop="orderStatus">
            <el-input type="number" v-model="form.orderStatus" placeholder="请输入0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="1" prop="status">
            <el-select v-model="form.status" clearable placeholder="请选择1">
              <el-option value="已拍下" label="未付款
2"/>
              <el-option value="已付款" label="未发货
3"/>
              <el-option value="已发货" label="未到达
4"/>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="12">
           <el-form-item label="backReason" prop="backReason">
             <el-input v-model="form.backReason" maxlength="255" placeholder="请输入backReason"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="backType" prop="backType">
             <el-input v-model="form.backType" maxlength="255" placeholder="请输入backType"/>
           </el-form-item>
         </el-col>
        <el-col :span="12">
          <el-form-item label="backImage" prop="backImage">
            <el-input type="textarea" v-model="form.backImage" maxlength="" placeholder="请输入backImage"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="addressId" prop="addressId">
            <el-input type="number" v-model="form.addressId" placeholder="请输入addressId"/>
          </el-form-item>
        </el-col>
         <el-col :span="12">
           <el-form-item label="address" prop="address">
             <el-input v-model="form.address" maxlength="255" placeholder="请输入address"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="addressNickname" prop="addressNickname">
             <el-input v-model="form.addressNickname" maxlength="255" placeholder="请输入addressNickname"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="addressPhone" prop="addressPhone">
             <el-input v-model="form.addressPhone" maxlength="255" placeholder="请输入addressPhone"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="wx" prop="payType">
            <el-input type="number" v-model="form.payType" placeholder="请输入wx"/>
          </el-form-item>
        </el-col>
         <el-col :span="12">
           <el-form-item label="payTime">
             <el-date-picker v-model="form.payTime" type="datetime" placeholder="请选择payTime"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="amount" prop="amount">
            <el-input type="number" v-model="form.amount" placeholder="请输入amount"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="count" prop="count">
            <el-input type="number" v-model="form.count" placeholder="请输入count"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="sendTime" prop="sendTime">
             <el-input v-model="form.sendTime" maxlength="255" placeholder="请输入sendTime"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="退款凭证" prop="image">
             <el-input v-model="form.image" maxlength="255" placeholder="请输入退款凭证"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="result" prop="result">
             <el-input v-model="form.result" maxlength="255" placeholder="请输入result"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="updatedTime">
             <el-date-picker v-model="form.updatedTime" type="datetime" placeholder="请选择updatedTime"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="transactionId" prop="transactionId">
             <el-input v-model="form.transactionId" maxlength="255" placeholder="请输入transactionId"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="desc" prop="desc">
             <el-input v-model="form.desc" maxlength="255" placeholder="请输入desc"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="backNo" prop="backNo">
             <el-input v-model="form.backNo" maxlength="255" placeholder="请输入backNo"/>
           </el-form-item>
         </el-col>
        <el-col :span="12">
          <el-form-item label="backAmount" prop="backAmount">
            <el-input type="number" v-model="form.backAmount" placeholder="请输入backAmount"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="微信的退款编号" prop="refundId">
             <el-input v-model="form.refundId" maxlength="255" placeholder="请输入微信的退款编号"/>
           </el-form-item>
         </el-col>
        <el-col :span="12">
          <el-form-item label="isDel" prop="isDel">
            <el-input type="number" v-model="form.isDel" placeholder="请输入isDel"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addOrder, getOrder, updateOrder} from "@/api/shop/order";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
    id: null,
    orderNo: null,
    memberId: null,
    memberName: null,
    orderStatus: null,
    status: null,
    backReason: null,
    backType: null,
    backImage: null,
    addressId: null,
    address: null,
    addressNickname: null,
    addressPhone: null,
    payType: null,
    payTime: null,
    amount: null,
    count: null,
    sendTime: null,
    image: null,
    result: null,
    updatedTime: null,
    transactionId: null,
    desc: null,
    backNo: null,
    backAmount: null,
    refundId: null,
    isDel: null,
});

// 效验规则
const rules = reactive<FormRules>({
})

// 获取详情
const getDetails = (id: string) => {
  getOrder(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '新增';
  if (id) {
    dialogData.id = id;
    dialogData.title = '编辑';
    getDetails(id);
  }
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  form.value = {};
}
// 提交

const submit = async () => {
   if (!formRef.value) return;
   await formRef.value.validate((valid: any) => {
   if (valid) {
       let data = form.value;
     if (data.id) {
       updateOrder({...data}).then(() => {
         ElMessage.success('操作成功');
         closeDialog();
         emits('refresh');
       })
     } else {
       addOrder({...data}).then(() => {
       ElMessage.success('操作成功');
       closeDialog();
       emits('refresh');
       })
     }
   }
  })
}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
